<style rel="stylesheet/scss" lang="scss" scoped>
	.m-table {
		width: 1220px;
		height: 500px;
		overflow: auto;
		border: 1px solid #E5E5E5;
		padding: 10px;
		flex: 1;
		margin-top: 10px;
		.sx-box {
			width: 100px;
			height: 20px;
			color: #333;
		}
		.sc-box {
			width: 100%;
			height: 50px;
			display: flex;
			padding: 0 10px;
			align-items: center;
			background: #fff;
			border: 1px solid #ebeef5;
			padding-left: 55px;
		}
		.el-table {
			max-width: initial !important;
		}
		.box-flex {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.sp-w-50 {
			width: 100px;
			display: block;
		}
		.tab-box{
			min-width: 100%;
		}
	}
</style>
<template>
	<div class="m-table" style="width: auto;" :style="'width:' + clWidth + 'px'">
		<div style="width: auto;">
			<el-button type="primary" size="mini" @click="setTabHead">设置表头</el-button>
			<el-button type="primary" size="mini" @click="setAttribute">设置属性值</el-button>

			<!-- <div class="sc-box" :style="'width:' + cheList.length*83 + 'px'">
				<screening @handleInput="handleInput" @filterListFn="filterListFn" :flag="item.showDrep" :head-tit-list="headTitList" @hideDrep="hideDrep"
				    ref="screen" :step="index" v-for="(item, index) in cheList">
				</screening>
			</div> -->
			<el-table 
				:style="'width:' + cheList.length*83 + 'px'" 
				ref="multipleTable" 

				class="tab-box"
				:data="modelList" highlight-current-row
			    :fit='false' @selection-change="handleSelectionChanges" size="mini">
				<el-table-column type="selection" width="50px" align="center" fixed="left"></el-table-column>
				<el-table-column v-for="tableHeader in modelHead" :key="tableHeader.keyId" :label="tableHeader.showName" align="center" v-if="tableHeader.keyId != 'id'">
					<template slot-scope="scope">
						<div style='width:100%:height:100%;text-align: center;'>
							<span>{{scope.row[tableHeader.keyId] ? scope.row[tableHeader.keyId].text : ''}}</span>
						</div>
					</template>
				</el-table-column>
			</el-table>

		</div>
		<el-dialog title="设置属性" center :visible.sync="passDialog" width="30%">
			<el-row class="p-all-20">
				<el-col :span="100" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">属性名称:</span>
					<!--<el-input v-model="groupName" />-->
					<el-select v-model="groupName" placeholder="请选择" style="width: 200px;">
						<el-option v-for="item in groupList" :key="item.groupName" :label="item.showName" :value="item.groupName">
						</el-option>
					</el-select>
				</el-col>
			</el-row>

			<el-row class="p-all-20 ">
				<el-col :span="100" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">属性值:</span>
					<el-input v-model="groupValue"  style="width: 200px;"/>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="passDialog = false">取 消</el-button>
				<el-button type="primary" @click="saveAdmin">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>
<script>
	import screening from './screening.vue'

	export default {
		props: {
			modelList: {
				type: Array,
				default: []
			},
			modelHead: {
				type: Array,
				default: []
			}
		},

		data() {
			return {
				targetDrep: 1,
				cheList: [],
				groupValue: '',
				groupName: '',
				groupList: [],
				keyId: '',
				clWidth: 0,
				num: 0,
				passDialog: false,
				selectTabList: [],
				headTitList: [],
				fullscreenLoading1: false

			}
		},
		created() {
			let _this = this
			this.initCheList()
			document.onclick = function () {
				let e = e || window.event
				let el = e.srcElement.className
				console.log(el)
				if (el !== 'he-input' && el !== 'item-li' && el !== 'item-ul' && el != 'el-checkbox__label' && el !=
					'el-checkbox__original' && el != 'load-more' && el != 'el-checkbox__inner') {
					console.log(444)
					_this.cheList.forEach((item) => {
						item.showDrep = false
					})
					return
				}
			}
			console.log('=================')
			console.log()
			this.clWidth = document.getElementById('modelContainter').clientWidth
		},
		methods: {
			filterListFn() {

				this.$emit('filterTabListFn', this.keyId, this.headTitList)
			},
			handleInput(val) {
				this.getModelheadoption(val, this.modelHead[this.num].keyId)
			},
			// 选中
			handleSelectionChanges(val) {
				this.selectTabList = val
				let valueId = ''
				valueId = val.map((item) => {
					for (let i in item) {
						if (i == 'model') {
							return item[i].modelId
						}
					}
				})
				this.selectTabList = valueId
				this.$emit('selectTabList', this.selectTabList)
				console.log(this.selectTabList)
			},
			saveAdmin() {
				//groupName
				let attr = this.groupList.filter((item) => {
					return item.groupName == this.groupName
				})
				if (!this.groupValue) {
					this.$message({
						type: 'error',
						message: '属性值不能为空'
					})
					return
				}

				this.$ajax({
					api: 'modelproperty/save',
					params: {
						keyId: attr[0].keyId,
						modelIds: this.selectTabList.join(','),
						text: this.groupValue
					}
				}).then(res => {
					if (res.status === 200) {
						this.$message({
							type: 'success',
							message: '设置成功'
						})
						this.$emit('refresh')
					}
				})
			},
			setAttribute() {
				if (!this.selectTabList.length) {
					this.$message({
						type: 'error',
						message: '请选择车型'
					})
					return
				}
				//设置属性值
				this.$ajax({
					api: 'getNewHeadList'
				}).then(res => {
					console.log(res)
					if (res.status === 200) {
						console.log(res)
						this.groupList = res.data
						this.passDialog = true
					} else {
						this.$message({
							type: 'error',
							message: res.data.message
						})
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			// 设置表头
			setTabHead() {
				this.$emit('setTabHead')
			},
			setSelected() {

			},
			initCheList() {
				console.log(this.modelHead)
				console.log(777777777)
				this.modelHead.forEach((item) => {
					let obj = {
						showDrep: false
					}
					this.cheList.push(obj)

				})
				console.log(this.cheList)
			},
			hideDrep(num) {
				this.cheList.forEach((item) => {
					item.showDrep = false
				})
				this.headTitList = []
				this.num = num
				this.fullscreenLoading1 = true
				this.cheList[num].showDrep = true
				if (this.cheList[num].showDrep) {
					console.log(this.modelHead[num])
					this.getModelheadoption('', this.modelHead[num].keyId)
				}

			},
			getModelheadoption(text = '', keyId) {
				this.keyId = keyId
				this.$ajax({
					api: 'modelheadoption',
					params: {
						keyId: keyId,
						text: text
					}
				}).then(res => {
					this.fullscreenLoading1 = false
					if (res.status === 200) {
						res.data.forEach((item) => {
							item.select = false
						})
						this.headTitList = res.data
					}
					console.log(res)
					this.time = null
				})
			}

		},
		watch: {
        	tabCurrentIndex(val) {
        		if(val == 1) {
        			setTimeout(() => {
        				this.initCheList()
        			},200)
        		}
        	}
        },
		components: {
			screening

		}
	}
</script>
